<?php

/* @var $this yii\web\View */

$this->title = $title;
?>

<style type="text/css">
    .preview{
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .preview img{
          display: block;
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        max-width: 90%;
        -webkit-transform: translate3d(-50%,-50%,0);
        transform: translate3d(-50%,-50%,0);
    }
    
    .preview .delete{
        position: absolute;
        z-index: 2;
        width: 19px;
        height: 19px;
        bottom: 10px;
        right: 10px;
        font-size: 0;
        background: url("…XUbDZTlyim6vR6vQk1+JbCBVjTXPISxVRVXrJcXKLw+gF7BIqryl7pzAAAAABJRU5ErkJggg==") no-repeat;
        background-size: 19px 19px;
    }
</style>

<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

<div class="container">
    <a class="weui_media_box weui_media_appmsg" href="javascript:void(0);">
                <div class="weui_media_hd">
                    <img alt="" src="<?=$userinfo['headimgurl']?>" class="weui_media_appmsg_thumb">
                </div>
                <div class="weui_media_bd">
                    <h4 class="weui_media_title"><?=$userinfo['nickname']?></h4>
                    <p class="weui_media_desc">欢迎来到超级人脉</p>
                </div>
    </a>
    <div class="weui_cell">
        <div class="weui_cell weui_cell_select">
            <div class="weui_cell_bd weui_cell_primary">
                <select name="qrcode_type" class="weui_select">
                    <option value="1" selected="">个人</option>
                    <option value="2">微信群</option>
                </select>
            </div>
        </div>
    
        <div class="weui_cell_bd weui_cell_primary" style="margin-left: 30px;">
            <input name="description" type="text" value="" class="weui_input" placeholder="请输入描述">
            <input id="qid" type="hidden" value="0" />
        </div>
    </div>
    <!-- <div class="weui_cells_title">上传</div> -->
    <div class="weui_cells weui_cells_form">
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <div class="weui_uploader">
            <div class="weui_uploader_hd weui_cell">
              <div class="weui_cell_bd weui_cell_primary">二维码上传</div>
            </div>
            <div class="weui_uploader_bd">
              <ul class="weui_uploader_files js_previews">
                <!-- 预览图插入到这 -->
              </ul>
              <div class="weui_uploader_input_wrp">
                <input class="weui_uploader_input js_file" type="file" multiple="" accept="image/jpg,image/jpeg,image/png,image/gif">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<br/><br/>

<a id="submitBtn" class="weui_btn weui_btn_primary" href="javascript:;">发布</a>

<script type="text/javascript">
    // codepen 没办法直接在 body 标签加属性，所以用这里用 js 给 body 添加 ontouchstart 属性来触发 :active
    document.body.setAttribute('ontouchstart', '');

    $(function() {
      // 允许上传的图片类型
      var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
      //10MB
      var maxSize = 1 * 1024 * 1024;
      // 图片最大宽度
      var maxWidth = 400;
      // 最大上传图片数量
      var maxCount = 1;
      var images = [];
      $('.js_file').on('change', function(event) {
        var files = event.target.files;
    
        // 如果没有选中文件，直接返回
        if (files.length === 0) {
          return;
        }
    
        for (var i = 0, len = files.length; i < len; i++) {
          var file = files[i];
          var reader = new FileReader();
    
          // 如果类型不在允许的类型范围内
          if (allowTypes.indexOf(file.type) === -1) {
            alert('该类型不允许上传');
            continue;
          }
    
          if (file.size > maxSize) {
            alert('图片太大，不允许上传');
            continue;
          }
    
          if ($('.weui_uploader_file').length >= maxCount) {
            alert('最多只能上传' + maxCount + '张图片');
            return;
          }
    
          reader.onload = function(e) {
              var img = new Image();
              img.onload = function() {
                // 不要超出最大宽度
                var w = Math.min(maxWidth, img.width);
                // 高度按比例计算
                var h = img.height * (w / img.width);
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 设置 canvas 的宽度和高度
                canvas.width = w;
                canvas.height = h;
                ctx.drawImage(img, 0, 0, w, h);
                var base64 = canvas.toDataURL('image/png');
                // 插入到预览区
                var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
                $('.weui_uploader_files').append($preview);
                $('.weui_uploader_input_wrp').remove()
                var num = $('.weui_uploader_file').length;
                images.push(base64);
            
  
                // 然后假装在上传，可以post base64格式，也可以构造blob对象上传
                var progress = 0;
                $.post(
                    '/qrcode/upload',
                    {'data' : base64, 'type': $('select[name="qrcode_type"]').val(), 'description': $('input[name="description"]').val()},
                    function(res) {
                    	$('#qid').val(res);
                        // console.log(res);
                });
  
                function uploading() {
                    $preview.find('.weui_uploader_status_content').text(++progress + '%');
                    if (progress < 100) {
                      setTimeout(uploading, 30);
                    } else {
                    $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
                    }
                }
                setTimeout(uploading, 30);
            };

          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    });

    $('#submitBtn').click(function(){
        $(this).addClass('weui_btn_disabled');
        $(this).attr('disabled', 'disabled');
        $(this).text('保存中...')
        var qid = $('#qid').val();
        $.post(
        	'/qrcode/create',
        	{'qid': qid},
        	function (res) {
        	    alert(res)
        	    window.location.href = '/'
        	})
    })
  });
</script>
